<template>
  <a-row type="flex" justify="center" align="middle" style="height: 100vh;">
    <a-col :span="8">
      <a-card title="Login">
        <a-form @submit.prevent="handleLogin">
          <a-form-item label="Username">
            <a-input v-model:value="username" placeholder="Enter your username" />
          </a-form-item>
          <a-form-item label="Password">
            <a-input-password v-model:value="password" placeholder="Enter your password" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit" block>Login</a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </a-col>
  </a-row>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { login } from '@/api/login-api';

const router = useRouter();
const username = ref('');
const password = ref('');

const handleLogin = async () => {
  try {
    const response = await login(username.value, password.value);
    localStorage.setItem('token', response.token);
    router.push('/');
  } catch (error) {
    alert('Failed to login. Please check your username and password.');
  }
};
</script>

<style scoped>
/* 这里可以添加一些局部的样式 */
</style>